<template>
	<div class="login_wrap">
		<div class="login_o_wrap">
			<div class="login_box">
				<h2 style="text-align: center;">蜂站总后台管理系统</h2>
				<div class="i_box">
					<el-form ref="form" :model="form">
						<el-form-item label="">
							<img class="zhanghao_icon" src="../../assets/images/zhanghao_icon.png" />
							<el-input v-model="form.userName" placeholder="账号" class="a_input"></el-input>
						</el-form-item>
						<el-form-item label="">
							<img class="zhanghao_icon" src="../../assets/images/pwd_icon.png" />
							<el-input @keyup.enter.native="loginBtn" v-model="form.password" :type="form.passwordType" placeholder="密码" class="a_input"></el-input>
							<img v-if="form.pwdShowIcon" @click="showPwdBtn" class="psw_show" src="../../assets/images/psw_show.png" />
							<img v-if="!form.pwdShowIcon" @click="showPwdBtn" class="psw_show" src="../../assets/images/psw_hide.png" />
						</el-form-item>
						<el-form-item label="">
							<el-checkbox v-model="form.rememberMe">记住密码</el-checkbox>
							<span @click="findPwdBtn" class="forget_pwd" style="cursor: pointer;">忘记密码</span>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" @click="loginBtn">登录</el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</div>
		<!-- 忘记密码 -->
		<el-dialog title="忘记密码" :visible.sync="findPwd.dialogFormVisible" center class="find_pwd" width="500px">
			<el-form :model="findPwd" :rules="rules" ref="fpdForm">
				<el-form-item prop='userName'>
					<el-input v-model.trim="findPwd.userName" :maxlength="255" placeholder="账号"></el-input>
				</el-form-item>
				<el-form-item prop='captcha'>
					<el-input v-model.trim="findPwd.captcha" :maxlength="255" placeholder="验证码" style="width: 265px;margin-left: -20px;"></el-input>
					<el-button @click="getCaptcha" :disabled=findPwd.disabled type="primary" style="width: 110px;">{{findPwd.captchaBtnText}}</el-button>
				</el-form-item>
				<el-form-item prop='password'>
					<el-input v-model.trim="findPwd.password" :maxlength="255" placeholder="新密码"></el-input>
				</el-form-item>
				<el-form-item prop='againpassword'>
					<el-input v-model.trim="findPwd.againpassword" :maxlength="255" placeholder="再次新密码"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="SubmitModifyPwdBtn('fpdForm')" type="primary" class="w-200">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>
<script>
	import http from '@/assets/js/http.js'
	export default {
		data() {
			return {
				form: {
					userName: '',
					password: '',
					from: 'base', //站点。 可选值: "base"总站后台 | "site"站点后台
					rememberMe: true, //是否自动登录。可选值: true | false
					passwordType: 'password',
					pwdShowIcon: true
				},
				findPwd: {
					disabled: false,
					dialogFormVisible: false,
					from: 'base',
					mobile: '',
					userName: '',
					captcha: '',
					password: '',
					againpassword: '',
					captchaBtnText: '获取验证码',
				},
				rules: {
					userName: [{
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					}],
					captcha: [{
						required: true,
						message: '请输入验证码',
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}],
					againpassword: [{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			loginBtn() {
				let that = this;
				let pData = {
					userName: this.form.userName,
					password: this.form.password,
					from: this.form.from,
					rememberMe: this.form.rememberMe
				}
				this.apiPost("/api/backend/account/login", pData).then(res => {
					if(res.code == 200) {
						localStorage.bUrserName=res.data.userName;
						store.commit('setUsers', {users: res.data.userName})
						that.$router.push({
							path: '/'
						})
					} else {
						that.$message({
							type: 'warning',
							message: res.err
						})
					}
				})
			},
			findPwdBtn() {
				this.findPwd.dialogFormVisible = true;
			},
			showPwdBtn() {
				if(this.form.passwordType == 'password') {
					this.form.pwdShowIcon = false;
					this.form.passwordType = 'text';
				} else {
					this.form.pwdShowIcon = true;
					this.form.passwordType = 'password';
				}
			},
			getCaptcha() {
				let that = this;
				if(that.findPwd.userName) {
					that.apiGet("/api/backend/account/mobile?from=base&userName=" + that.findPwd.userName)
						.then(res => {
							if(res.code == 200) {
								that.findPwd.mobile = res.data.mobile
								that.apiGet("/api/captcha?mobile=" + that.findPwd.mobile + "&from=base" + "&type=1")
									.then(res => {
										if(res.code == 200) {
											var count = 60;
											that.findPwd.disabled = true;
											var sil = setInterval(function() {
												count--;
												if(count == -1) {
													that.findPwd.captchaBtnText = '获取验证码';
													that.findPwd.disabled = false;
													clearInterval(sil)
													return false;
												}
												that.findPwd.captchaBtnText = count + 's';
											}, 1000)
											that.$message({
												type: 'success',
												message: '验证码已发送，注意查收'
											})
										}
									})
							}
						})
				} else {
					that.$message({
						type: 'info',
						message: '请输入账号'
					})
				}
			},
			SubmitModifyPwdBtn(formName) {
				this.$refs[formName].validate((valid) => {
					if(valid) {
						let that = this;
						that.apiPost("/api/backend/account/password/reset", {
								userName: that.findPwd.userName,
								from: that.findPwd.from,
								captcha: that.findPwd.captcha,
								password: that.findPwd.password,
							})
							.then(res => {
								if(res.code == 200) {
									that.$message({
										type: 'success',
										message: '密码修改成功'
									})
									that.$router.push({name: '登录'})
								}
							})
						}
					});
			}
		},
		mounted() {

		},
		created() {

		},
		mixins: [http]
	}
</script>

<style scoped>
	.login_wrap {
		height: 100%;
		background: linear-gradient(to bottom right, #47518b, #343a66);
	}
	
	.login_o_wrap {
		padding-top: 20px;
	}
	
	.login_box {
		width: 440px;
		padding: 60px;
		background: #FFFFFF;
		border-radius: 6px;
		margin: 0 auto;
		margin-top: 100px;
	}
	
	.i_box {
		padding-top: 20px;
	}
	
	.el-button {
		width: 100%;
	}
	
	.psw_show {
		position: absolute;
		right: 8px;
		top: 8px;
	}
	
	.el-input__inner {
		padding-left: 40px!important;
	}
	
	.el-input .el-input__inner {
		padding-left: 40px;
	}
	
	.a_input .el-input__inner {
		padding-left: 40px!important;
	}
	
	.zhanghao_icon {
		position: absolute;
		top: 8px;
		left: 8px;
		z-index: 10;
	}
	
	.forget_pwd {
		float: right;
		color: #409eff;
	}
</style>
<style type="text/css">
	.a_input .el-input__inner {
		padding-left: 40px;
	}
	
	.find_pwd .el-form-item__content {
		text-align: center;
	}
	
	.find_pwd .el-input {
		width: 400px;
	}
	
	.find_pwd .el-button {
		width: 320px;
	}
</style>